<template>
    <div>

        <!-- 卡片视图区域 -->
        <el-card>
            <el-row :gutter="20">
                <el-col :span="4">
                    <el-button type="primary" size="small" @click="addDialogVisible = true">添加菜单</el-button>
                </el-col>
            </el-row>
            <el-table :data="menuInfo" border stripe v-loading="loading"
                      element-loading-text="拼命加载中"
                      size="mini"
                      row-key="id"
                      :tree-props="{children: 'child', hasChildren: 'hasChildren'}"
                      element-loading-spinner="el-icon-loading">
                <el-table-column prop="id" label="id" type="selection" fixed></el-table-column>
                <!--        <ElSelectTree fixed :expand-all="!!!1" child-key="child" file-icon="icon icon-file"-->
                <!--                              folder-icon="icon icon-folder"-->
                <!--                              levelKey='level'-->
                <!--                              prop="title" label="名称" :show-overflow-tooltip="true" :indent-size="20"-->
                <!--                              parentKey='parent_id'-->
                <!--                              treeKey='id'>-->
                <!--        </ElSelectTree>-->
                <el-table-column prop="title" label="名称"></el-table-column>
                <el-table-column prop="name" label="路由"></el-table-column>
                <el-table-column prop="level" label="等级">
                    <template slot-scope="scope">
                        <el-tag v-if="scope.row.level === 0">一级</el-tag>
                        <el-tag v-else-if="scope.row.level === 1" type="success">二级</el-tag>
                        <el-tag v-else type="warning">三级</el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="type" label="类别">
                    <template slot-scope="scope">
                        <el-tag v-if="scope.row.type === 1">系统功能</el-tag>
                        <el-tag v-else type="warning">用户功能</el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-tooltip effect="dark" content="添加子菜单" placement="top" :enterable="false">
                            <el-button type="success" icon="el-icon-plus" size="mini"
                                       @click="addChildMenuDialog(scope.row.id,scope.row.title)"></el-button>
                        </el-tooltip>
                        <el-tooltip effect="dark" content="编辑" placement="top" :enterable="false">
                            <el-button type="primary" icon="el-icon-edit" size="mini" @click="editMenuDialog(scope.row)"
                            ></el-button>
                        </el-tooltip>
                        <el-tooltip effect="dark" content="删除" placement="top" :enterable="false">
                            <el-button type="danger" icon="el-icon-delete" size="mini" @click="delMenu(scope.row.id)"
                            ></el-button>
                        </el-tooltip>
                    </template>
                </el-table-column>
            </el-table>
            <!-- 新增菜单 -->
            <el-dialog title="添加菜单" :visible.sync="addDialogVisible" width="50%" @close="addDialogClose">
                <el-form :model="addMenuForm" :rules="addMenuRule" ref="addMenuRef" label-width="70px">
                    <el-form-item label="菜单类别" prop="type">
                        <el-select v-model="addMenuForm.type" placeholder="请选择菜单类别" style="width:100%">
                            <el-option v-for="menu in menuType" :index="menu.id + ''" :key="menu.id" :label="menu.name"
                                       :value="menu.id"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="名称" prop="title">
                        <el-input v-model="addMenuForm.title"></el-input>
                    </el-form-item>
                    <el-form-item label="路由" prop="name">
                        <el-input v-model="addMenuForm.name"></el-input>
                    </el-form-item>
                    <el-form-item label="图标" prop="icon">
                        <el-input v-model="addMenuForm.icon"></el-input>
                    </el-form-item>
                    <el-form-item label="排序" prop="sort">
                        <el-input v-model="addMenuForm.sort"></el-input>
                    </el-form-item>
                    <el-form-item label="状态" prop="status">
                        <el-switch v-model="addMenuForm.status"></el-switch>
                    </el-form-item>
                    <el-form-item label="备注" prop="remark">
                        <el-input type="textarea" v-model="addMenuForm.remark"></el-input>
                    </el-form-item>
                </el-form>
                <span slot="footer" class="dialog-footer">
              <el-button @click="addDialogVisible = false">取 消</el-button>
              <el-button type="primary" @click="addMenu">确 定</el-button>
          </span>
            </el-dialog>
            <!-- 新增子菜单 -->
            <el-dialog title="添加子菜单" :visible.sync="addChildMenuDialogVisible" width="50%" @close="addChildMenuDialogClose">
                <el-form :model="addChildMenuForm" :rules="addChildMenuRule" ref="addChildMenuRef" label-width="70px">
                    <el-form-item label="菜单类别" prop="type">
                        <el-select v-model="addChildMenuForm.type" placeholder="请选择菜单类别" style="width:100%">
                            <el-option v-for="menu in menuType" :index="menu.id + ''" :key="menu.id" :label="menu.name"
                                       :value="menu.id"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="parent_id" prop="parent_id" hidden>
                        <el-input v-model="addChildMenuForm.parent_id"></el-input>
                    </el-form-item>
                    <el-form-item label="上级" prop="parent_title">
                        <el-input v-model="addChildMenuForm.parent_title" disabled></el-input>
                    </el-form-item>
                    <el-form-item label="名称" prop="title">
                        <el-input v-model="addChildMenuForm.title"></el-input>
                    </el-form-item>
                    <el-form-item label="路由" prop="name">
                        <el-input v-model="addChildMenuForm.name"></el-input>
                    </el-form-item>
                    <el-form-item label="图标" prop="icon">
                        <el-input v-model="addChildMenuForm.icon"></el-input>
                    </el-form-item>
                    <el-form-item label="排序" prop="sort">
                        <el-input v-model="addChildMenuForm.sort"></el-input>
                    </el-form-item>
                    <el-form-item label="状态" prop="status">
                        <el-switch v-model="addChildMenuForm.status"></el-switch>
                    </el-form-item>
                    <el-form-item label="备注" prop="remark">
                        <el-input type="textarea" v-model="addChildMenuForm.remark"></el-input>
                    </el-form-item>
                </el-form>
                <span slot="footer" class="dialog-footer">
              <el-button @click="addChildMenuDialogClose = false">取 消</el-button>
              <el-button type="primary" @click="addChildMenu">确 定</el-button>
          </span>
            </el-dialog>
            <!-- 编辑菜单 -->
            <el-dialog title="编辑菜单" :visible.sync="editMenuDialogVisible" width="50%" @close="editMenuDialogClose">
                <el-form :model="editMenuForm" :rules="editMenuRule" ref="editMenuRef" label-width="70px">
                    <el-form-item label="菜单类别" prop="type">
                        <el-select v-model="editMenuForm.type" placeholder="请选择菜单类别" style="width:100%">
                            <el-option v-for="menu in menuType" :index="menu.id + ''" :key="menu.id" :label="menu.name"
                                       :value="menu.id"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="父级" prop="parent_id">
                        <el-select-tree :default-expand-all="defaultExpandAll"
                                        :multiple="multiple"
                                        :placeholder="placeholder"
                                        :disabled="disabled"
                                        :disabled-values="disabledValues"
                                        :data="menuInfo"
                                        :props="treeProps"
                                        :check-strictly="checkStrictly"
                                        :clearable="clearable"
                                        v-model="value" style="width:100%"></el-select-tree>
                    </el-form-item>
                    <el-form-item label="名称" prop="title">
                        <el-input v-model="editMenuForm.title"></el-input>
                    </el-form-item>
                    <el-form-item label="路由" prop="name">
                        <el-input v-model="editMenuForm.name"></el-input>
                    </el-form-item>
                    <el-form-item label="图标" prop="icon">
                        <el-input v-model="editMenuForm.icon"></el-input>
                    </el-form-item>
                    <el-form-item label="排序" prop="sort">
                        <el-input v-model="editMenuForm.sort"></el-input>
                    </el-form-item>
                    <el-form-item label="状态" prop="status">
                        <el-switch v-model="editMenuForm.status"></el-switch>
                    </el-form-item>
                    <el-form-item label="备注" prop="remark">
                        <el-input type="textarea" v-model="editMenuForm.remark"></el-input>
                    </el-form-item>
                </el-form>
                <span slot="footer" class="dialog-footer">
              <el-button @click="editMenuDialogVisible = false">取 消</el-button>
              <el-button type="primary" @click="editMenu">确 定</el-button>
          </span>
            </el-dialog>
        </el-card>
    </div>
</template>

<script>
import ElSelectTree from 'el-select-tree'
export default {
    components: {
        ElSelectTree
    },
    data() {
        let checkSort = (rule, value, callback) => {
            const regSort = /^(?:[1-9]?\d|100)$/;
            if (regSort.test(value)) {
                return callback()
            }
            callback(new Error('请输入0-100的整数'))
        }
        return {
            queryInfo: {
                name: '',
                type: 'child'
            },
            loading:true,
            clearable: true,
            defaultExpandAll: false,
            multiple: false,
            placeholder: '请选择父级',
            disabled: false,
            checkStrictly: true,
            treeProps: {
                value: 'id',
                children: 'child',
                label: 'title'
            },
            value: '',
            disabledValues: [],
            menuInfo: [],
            //菜单类别
            menuType: [],
            addDialogVisible: false,
            addChildMenuDialogVisible: false,
            editMenuDialogVisible: false,
            addMenuForm: {
                title: '',
                name: '',
                sort: '',
                remark: '',
                status: true,
                icon: '',
                type: 1
            },
            addChildMenuForm: {
                parent_id: '',
                parent_title: '',
                title: '',
                name: '',
                sort: '',
                remark: '',
                status: true,
                icon: '',
                type: 1
            },
            editMenuForm: {
                parent_id: '',
                title: '',
                name: '',
                sort: '',
                remark: '',
                status: true,
                icon: '',
                type: 0
            },
            editMenuRule: {
                title: [
                    {required: true, message: '菜单名称不能为空', trigger: 'blur'},
                    {min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur'}
                ],
                name: [
                    {required: true, message: '路由不能为空', trigger: 'blur'},
                ],
                sort: [
                    {required: true, message: '排序不能为空', trigger: 'blur'},
                    {validator: checkSort, trigger: 'blur'}
                ],
                icon: [
                    {required: true, message: '图标不能为空', trigger: 'blur'},
                ]
            },
            addMenuRule: {
                title: [
                    {required: true, message: '菜单名称不能为空', trigger: 'blur'},
                    {min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur'}
                ],
                name: [
                    {required: true, message: '路由不能为空', trigger: 'blur'},
                ],
                sort: [
                    {required: true, message: '排序不能为空', trigger: 'blur'},
                    {validator: checkSort, trigger: 'blur'}
                ],
                icon: [
                    {required: true, message: '图标不能为空', trigger: 'blur'},
                ]
            },
            addChildMenuRule: {
                title: [
                    {required: true, message: '菜单名称不能为空', trigger: 'blur'},
                    {min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur'}
                ],
                name: [
                    {required: true, message: '路由不能为空', trigger: 'blur'},
                ],
                sort: [
                    {required: true, message: '排序不能为空', trigger: 'blur'},
                    {validator: checkSort, trigger: 'blur'}
                ],
                icon: [
                    {required: true, message: '图标不能为空', trigger: 'blur'},
                ]
            }
        }
    },
    created() {
        this.getMenuInfo()
        this.getMenuType()
    },
    methods: {
        async getMenuType() {
            const {data: res} = await this.$http.get('admin/menuType')
            if (res.code !== 200) return this.$message.error('获取菜单列表失败')
            this.menuType = res.data.list
            this.loading = false
        },
        addDialogClose() {
            this.$refs.addMenuRef.resetFields()
        },
        addChildMenuDialogClose() {
            this.$refs.addChildMenuRef.resetFields()
        },
        editMenuDialogClose() {
            this.disabledValues = []
            this.$refs.editMenuRef.resetFields()
        },
        async getMenuInfo() {
            const {data: res} = await this.$http.get('admin/menu_list', {params: this.queryInfo})
            if (res.code !== 200) return this.$message.error('获取菜单列表失败')
            this.menuInfo = res.data.list
        },
        //新增菜单
        addMenu() {
            this.$refs.addMenuRef.validate(async valid => {
                if (!valid) return this.$message.error('输入不合法')
                const {data: result} = await this.$http.post('admin/menuSave', this.addMenuForm)
                if (result.code !== 200) return this.$message.error(result.data.message)
                this.$message.success('添加菜单成功')
                this.addDialogVisible = false
                this.getMenuInfo()

            })
        },
        //子菜单赋值
        addChildMenuDialog(id, title) {
            this.addChildMenuForm.parent_id = id
            this.addChildMenuForm.parent_title = title
            this.addChildMenuDialogVisible = true;
        },
        //新增子菜单
        addChildMenu() {
            this.$refs.addChildMenuRef.validate(async valid => {
                if (!valid) return this.$message.error('输入不合法')
                const {data: result} = await this.$http.post('admin/child_save', this.addChildMenuForm)
                if (result.code !== 200) return this.$message.error(result.data.message)
                this.$message.success('添加子菜单成功')
                this.addChildMenuDialogVisible = false
                this.getMenuInfo()
            })
        },
        editMenuDialog(menuInfo) {
            // const id = menuInfo.id
            // this.disabledValues.push(id)
            this.editMenuForm.title = menuInfo.title
            this.editMenuForm.name = menuInfo.name
            this.editMenuForm.sort = menuInfo.sort
            this.editMenuForm.remark = menuInfo.remark
            if (menuInfo.status === 1) {
                this.editMenuForm.status = true
            } else {
                this.editMenuForm.status = false
            }
            this.$set(this.editMenuForm, 'id', menuInfo.id)
            this.editMenuForm.icon = menuInfo.icon
            this.editMenuForm.type = menuInfo.type
            this.value = menuInfo.parent_id
            this.editMenuDialogVisible = true
        },
        editMenu() {
            this.editMenuForm.parent_id = this.value
            this.$refs.editMenuRef.validate(async valid => {
                if (!valid) return this.$message.error('输入不合法')
                const {data: result} = await this.$http.post('admin/menuSave', this.editMenuForm)
                if (result.code !== 200) return this.$message.error(result.data.message)
                this.$message.success('编辑用户成功')
                this.editMenuDialogVisible = false
                this.getMenuInfo()

            })
        },
        async delMenu(id){
            const configResult = await this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).catch(err => err);
            if (configResult !== 'confirm') return this.$message.info('已取消删除')
            const {data: result} = await this.$http.get('admin/menuDel/' + id)
            if (result.code !== 200) return this.$message.error(result.data.message)
            this.$message.success('删除成功')
            this.getMenuInfo();
        }
    }
}
</script>

<style scoped>

</style>
